import { Input, Select, Space, Button, Table, Image, Switch } from 'antd'
import { useEffect } from 'react'
import { DeleteOutlined, EditOutlined } from '@ant-design/icons'
import { useState } from 'react'
import { getCategoryList, getProList, getSearchProList } from '../../api/pro'

import ExportJsonExcel from 'js-export-excel'

type ExportProps = {}
// 产品接口约束
interface DataType {
 proid: string;
 proname: string;
 img1: string;
 originprice: number;
 discount: number;
 sales: number;
 stock: number;
 category: string;
 brand: string;
 issale: number;
 isrecommend: number;
 isseckill: number;
}

export const Export = (props: ExportProps) => {
 const [proList, setProList] = useState<DataType[]>([]) // 表格数
 const [categoryList, setCategoryList] = useState<string[]>([]) // 分类数据
 const [category, setCategory] = useState<string>('') //分类搜索条件
 const [search, setSearch] = useState<string>('') // 关键词搜索

 const [current, setCurrent] = useState<number>(1) // 页码
 const [pageSize, setPageSize] = useState<number>(5) // 每页显示个数

 const getProListData = async () => { // 请求表格数据
     const res = await getProList()
     setProList(res.data.data)
 }

 const getCategoryListData = async () => { // 请求分类的数据
     const res = await getCategoryList()
     setCategoryList(res.data.data)
 }

 useEffect(() => {
     getProListData()
     getCategoryListData()
 }, [])


 return (
     <Space direction='vertical' style={{ width: '100%' }}>
         <Space>
             <Select value={category} style={{ width: 120 }} onChange={value => {
                 console.log(value)
                 setCategory(value)
             }}>
                 <Select.Option key='all' value="">全部</Select.Option>
                 {
                     categoryList && categoryList.map(item => {
                         return (
                             <Select.Option key={item} value={item}>{item}</Select.Option>
                         )
                     })
                 }
             </Select>
             <Input placeholder='请输入关键词' value={search} onChange={e => setSearch(e.target.value)} />
             <Button type='primary' onClick={async () => {
                 const res = await getSearchProList({
                     category,
                     search
                 })
                 setProList(res.data.data)
             }}>搜索</Button>
             <Button type='primary' onClick={() => {
                 const arr = JSON.parse(JSON.stringify(proList))
                 arr.sort((a: DataType, b: DataType) => a.originprice - b.originprice)
                 setProList(arr)
             }}>价格升序</Button>
             {/* 增加导出数据的功能 */}
             <Button type='primary' onClick={() => {
                 let option: {
                     fileName: string
                     datas: {
                         sheetData: DataType[],
                         sheetName: string,
                         sheetFilter: string[],
                         sheetHeader: string[],
                         columnWidths: number[]
                     }[]
                 };
                 option = {
                     fileName: "产品列表", // 导出的文件的名称
                     datas: [
                         {
                             sheetData: proList, // 表格数据
                             sheetName: "产品列表-基础", // excel表格中表格的名字
                             sheetFilter: ["proname", "img1", "category"], // 需要导出的数据的字段
                             sheetHeader: ["产品名称", "图片", "分类"], // 表头的值
                             columnWidths: [20, 20],
                         },
                         {
                             sheetData: proList, // 表格数据
                             sheetName: "产品列表-完整", // excel表格中表格的名字
                             sheetFilter: ["proname", "img1", "category", 'originprice'], // 需要导出的数据的字段
                             sheetHeader: ["产品名称", "图片", "分类", '价格'], // 表头的值
                             columnWidths: [20, 20],
                         },
                     ]
                 }

                 var toExcel = new ExportJsonExcel(option); //new
                 toExcel.saveExcel(); //保存
             }}>导出数据</Button>
         </Space>
         <Table
             dataSource={proList}
             rowKey="proid"
             bordered
             scroll={{ y: document.body.offsetHeight - 330 }}
             pagination={{
                 current,
                 pageSize,
                 showTotal: (total) => {
                     return <span> 共有 {total} 条数据</span>
                 },
                 onChange(page, pageSize) {
                     setCurrent(page)
                     setPageSize(pageSize)
                 }
             }}
         >
             <Table.Column
                 title="序号"
                 render={(text, record, index) => { return <span>{(current - 1) * pageSize + index + 1}</span> }}
             ></Table.Column>
             <Table.Column
                 title="分类"
                 dataIndex="category"
             ></Table.Column>
             <Table.Column
                 title="品牌"
                 dataIndex="brand"
             ></Table.Column>
             <Table.Column
                 title="名称"
                 dataIndex="proname"
                 render={(text) => { return text.length > 10 ? text.substring(0, 10) + "..." : text }}
             ></Table.Column>
             <Table.Column
                 title="图片"
                 dataIndex="img1"
                 render={(text) => { return <Image src={text} width={80} height={80} /> }}
             ></Table.Column>
             <Table.Column
                 title="价格"
                 dataIndex="originprice"
                 sorter={(a: DataType, b: DataType) => a.originprice - b.originprice}
             ></Table.Column>
             <Table.Column
                 title="折扣"
                 dataIndex="discount"
                 sorter={(a: DataType, b: DataType) => a.discount - b.discount}
             ></Table.Column>
             <Table.Column
                 title="销量"
                 dataIndex="sales"
                 sorter={(a: DataType, b: DataType) => a.sales - b.sales}
             ></Table.Column>
             <Table.Column
                 title="库存"
                 dataIndex="stock"
                 sorter={(a: DataType, b: DataType) => a.stock - b.stock}
             ></Table.Column>
             <Table.Column
                 title="是否上架"
                 dataIndex="issale"
                 render={(text) => { return <Switch checked={text === 1} /> }}
             ></Table.Column>
             <Table.Column
                 title="是否推荐"
                 dataIndex="isrecommend"
                 render={(text) => { return <Switch checked={text === 1} /> }}
             ></Table.Column>
             <Table.Column
                 title="是否秒杀"
                 dataIndex="isseckill"
                 render={(text) => { return <Switch checked={text === 1} /> }}
             ></Table.Column>
             <Table.Column
                 title="操作"
                 render={(text, record: DataType, index) => {
                     return (
                         <Space>
                             <Button type="primary" shape="circle" icon={<EditOutlined />} />
                             <Button danger shape="circle" icon={<DeleteOutlined />} />
                         </Space>
                     )
                 }}
             ></Table.Column>
         </Table>
     </Space>
 );
}